<!-- 右侧配置抽屉 -->
<template>
  <q-drawer v-model="appStore.setting" side="right" bordered behavior="mobile">
    <q-toolbar class="q-layout__section--marginal">
      <q-toolbar-title> 界面配置 </q-toolbar-title>
      <q-btn flat dense round :icon="mdiClose" @click="appStore.setting = false" />
    </q-toolbar>
    <q-card flat>
      <q-card-section class="q-py-xs">
        <div class="text-h6 q-my-sm">主题配置</div>
        <div class="text-center">
          <q-btn
            v-for="item in themeOptions"
            :key="item.value"
            push
            stack
            :icon="item.icon"
            :label="item.lable"
            style="width: 60px; margin: 0 10px"
            :color="settingStore.theme === item.value ? 'primary' : undefined"
            @click="settingStore.theme = item.value"
          />
        </div>
      </q-card-section>

      <q-card-section class="q-py-none">
        <div class="text-h6 q-my-sm">界面配置</div>
        <q-toggle v-model="settingStore.fixedHeader" label="固定顶部工具栏" size="lg" />
        <q-toggle v-model="settingStore.sidebarLogo" label="显示侧边栏LOGO" size="lg" />
        <q-toggle v-model="settingStore.tagsView" label="显示标签栏" size="lg" />
        <q-toggle v-model="settingStore.errorLog" label="显示错误日志" size="lg" />
      </q-card-section>

      <q-card-section class="q-pt-none">
        <div class="text-h6 q-my-sm">主题颜色</div>
        <q-color v-model="settingStore.themeColor" no-header />
      </q-card-section>

      <q-card-actions class="q-mx-md q-mt-xs">
        <q-btn class="full-width" color="secondary" @click="settingStore.reset()">重置</q-btn>
      </q-card-actions>
    </q-card>
  </q-drawer>
</template>

<script lang="ts" setup>
  import { mdiClose, mdiWhiteBalanceSunny, mdiWeatherNight, mdiMonitor } from '@quasar/extras/mdi-v7';

  import { ThemeType, useAppStore, useSettingStore } from 'src/stores';

  const appStore = useAppStore();
  const settingStore = useSettingStore();

  // 主题
  const themeOptions = [
    { lable: '浅色', icon: mdiWhiteBalanceSunny, value: 'light' as ThemeType, slot: 'light' },
    { lable: '深色', icon: mdiWeatherNight, value: 'dark' as ThemeType, slot: 'dark' },
    { lable: '自动', icon: mdiMonitor, value: 'system' as ThemeType, slot: 'system' },
  ];
</script>
